<template>
  <div class="home-container">
    <h2 class="title">社团列表</h2>
    <el-row :gutter="20">
      <el-col :span="8" v-for="club in clubs" :key="club.clubId">
        <el-card class="club-card">
          <div class="club-header">
            <img :src="getImageUrl(club.logo) || defaultLogo" class="club-avatar" />
            <div class="club-info">
              <div class="club-name">{{ club.clubName }}</div>
              <div class="club-desc">{{ club.description }}</div>
            </div>
          </div>
          <el-button type="primary" @click="handleApply(club)">申请加入</el-button>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { listClubsByVisitor } from '@/api/system/clubs'
import useUserStore from '@/store/modules/user'
import defaultLogo from '@/assets/logo/logo.png'

export default {
  name: 'Home',
  data() {
    return {
      clubs: [],
      defaultLogo
    }
  },
  created() {
    this.loadClubs()
  },
  methods: {
    getImageUrl(url) {
      if (!url) return '';
      if (url.startsWith('http://') || url.startsWith('https://')) {
        return url;
      }
      return import.meta.env.VITE_APP_BASE_API + url;
    },
    loadClubs() {
      listClubsByVisitor().then(res => {
        this.clubs = res.rows || []
      })
    },
    handleApply(club) {
      const userStore = useUserStore()
      const token = userStore.token
      if (!token) {
        this.$message.info('请先登录后再申请加入社团')
        this.$router.push({ path: '/login', query: { redirect: '/home' } })
        return
      }
      // 跳转到社团申请页或弹窗
      this.$router.push({ path: `/index`, query: { clubId: club.clubId } })
    }
  }
}
</script>

<style scoped>
.home-container {
  max-width: 1000px;
  margin: 40px auto;
}
.title {
  text-align: center;
  margin-bottom: 30px;
}
.club-card {
  margin-bottom: 20px;
}
.club-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.club-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 16px;
}
.club-info {
  flex: 1;
}
.club-name {
  font-weight: bold;
  font-size: 18px;
}
.club-desc {
  color: #888;
  font-size: 14px;
}
</style> 